<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
    <style>

        .container{
            width: 960px;
            height: 400px;
            background-color: greenyellow;
            margin-left: auto;
            margin-right: auto;
            padding: 15px;
        }


        .btn{
              width: 80px;
              border-radius: 12px;
        }


        .success{
            background-color: greenyellow;
        }

        .danger{
             background-color: red;
        }

        .warning {
             background-color: yellow;
        }


        .btn-group .btn:first-child{
             border-bottom-right-radius: 0;
             border-top-right-radius: 0;
        }

        .btn-group .btn:last-child{
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }


        .btn-group .btn:not(:first-child):not(:last-child){
             border-radius: 0;
        }

        .btn-group .btn {
             float: left;

        }

    </style>
</head>
<body>

<div class="container">


    <div class="btn-group">

        <button class="btn success">按钮1</button>
        <button class="btn danger">按钮2</button>
        <button class="btn warning">按钮3</button>

    </div>

</div>


</body>
</html>